<template>
  <div>
    <headerXX :name="title"></headerXX>
    <van-pull-refresh
      class="pull-refresh_Search"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-empty
        v-if="list.length == 0 && !error"
        image="search"
        description="未找到数据"
      />
      <van-empty v-if="error" image="error" description="网络错误" />
      <van-list
        :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="queryList"
      >
        <div class="ulbox">
          <div class="ul" v-for="(item, index) in list" :key="index">
            <div
              class="li"
              :style="
                item.ZT == 0
                  ? 'border:2px solid #027571;'
                  : 'border:2px solid #ffffff'
              "
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 100%;
                  padding: 5px 0;
                "
              >
                <div class="li_left">
                  <img :src="item.goodImage" mode="" />
                </div>
                <div class="li_right">
                  <div style="font-weight: 600; color: #36c2a8">
                    {{ item.goodName }}
                  </div>
                  <div class="text XLHb">
                    {{ item.goodDescription }}
                  </div>
                  <div class="minus_addkey_image">
                    <div
                      v-if="item.ZT == 1"
                      style="
                        border: 1px solid #36c2a8;
                        color: #36c2a8;
                        border-radius: 10px;
                        font-size: 12px;
                        width: 70px;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                      @click="item.ZT = 0"
                    >
                      选择
                    </div>
                    <div
                      v-else
                      style="
                        color: #808080;
                        border: #808080 1px solid;
                        border-radius: 10px;
                        font-size: 12px;
                        width: 70px;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                      @click="item.ZT = 1"
                    >
                      取消选择
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
    <div class="cleaning_bottom_list">
      <div class="cleaning_bottom" @click="BDXX()">预 约</div>
    </div>
    <ReL
      @calendar="calendar"
      @closeCalendar="closeCalendar"
      :dateshow="dateshow"
    />
  </div>
</template>

<script>
import { testUserMessage } from "../../common/testUser.js";
import { getToolList } from "@/api/realAssets/icsharedstation/JBJJ_JKZC_GXGJ_SHFS/index.js";
import { getAccessToken } from "../../common/YYSLxx.js";
import { Notify } from "vant";
import moment from "moment";
import ReL from "../../components/ReL.vue";
import headerXX from "../../components/title.vue";
export default {
  components: { headerXX, ReL },
  data() {
    return {
      dateXX: "",
      titleRYxx: "预约",
      minDate: Number(new Date()),
      maxDate: "",
      title: "健康自测",
      dateshow: false,
      PLxx: 0,
      siteData: JSON.parse(localStorage.getItem("siteData")),
      list: [],
      finished: false,
      error: false,
      loading: false,
      refreshing: false,
      pageData: {
        pageNumber: 1,
        pageSize: 10,
      },
      printData: {},
    };
  },
  created() {},
  mounted() {
    testUserMessage("健康自测").then((siteData) => {
      this.siteData = siteData[0];
      let currentDate = moment(); // 创建当前日期对象
      let newDate = currentDate.add(3, "days");
      this.maxDate = moment(newDate).unix() * 1000;
      this.queryList();
    });
  },
  methods: {
    onRefresh() {
      //   list.value = [];
      this.pageData.pageNumber = 1;
      this.pageData.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.queryList();
    },
    retryLoad() {
      error.value = false;
      loading.value = true;
      this.queryList();
    },
    //      timeClick (item)  {
    //   // minDateTime = Date.parse(dateCycle.nowDate());
    //   // maxDateTime = Date.parse(dateCycle.endDate(dateNumValue));
    //   // $refs.datetimePicker.open('center');
    //   this.printData = item;
    //   this.dateshow = true;
    // },
    valChange(e) {
      this.ZJG = 0;
      this.list.forEach((item) => {
        if (item.ID == e.name) {
          item.num = e.value;
        }

        this.ZJG += item.num * item.JG;
      });
    },
    BDXX() {
      let choselist = this.list.filter((item) => {
        if (item.ZT == 0) {
          return item;
        }
      });
      if (choselist.length == 0) {
        Notify({ type: "warning", message: "预约设备最少需要一个" });
        return;
      }
      this.dateshow = true;
    },
    calendar(e) {
      this.dateshow = false;
      let listXX = this.list.filter((item) => {
        if (item.ZT == 0) {
          return item;
        }
      });
      this.dateXX = e;
      const currentTimeStamp = moment().unix();
      const min = BigInt("1" + "0".repeat(18)); // 10^18
      const max = BigInt("1" + "0".repeat(19)); // 10^19
      const randomNum =
        min + BigInt(Math.floor(Math.random() * Number(max - min)));

      let itemXX = {
        SBBT: "健康自测",
        goodInfo: [],
        orderNumber: currentTimeStamp + randomNum.toString(), //预约编号
        siteId: this.siteData.id,
        orderProject: this.title, //预约项目
        orderProjectType: "1", //0:   1:  (区分健康自测类型与其他类型)
        orderCreationTime: moment().format("YYYY-MM-DD"), //下单时间
        estimateArrivalTime: this.dateXX, //预计上门时间
        estimateSumPrice: "", //预估费用
        orderSubType: "", //预约类型
        serviceDescription: "", //服务介绍
        orderLocation: "", //预约地址(非空展示)
        serviceTip: "", //温馨提示(非空展示)
        goodSumPrice: "", //总价
        serviceTitleList: [], //服务标题
        goodList: [],
      };
      listXX.forEach((item) => {
        let toolobj = {
          id: item.goodId,
          requestQty: 1,
        };

        let obj = {
          goodId: item.goodId,
          goodName: "",
          servicePrice: "",
          serviceQty: "",
          goodCountPrice: "",
          serviceProjectName: item.goodName,
          remark: item.remark,
          serviceMessage: item.goodDescription,
        };
        itemXX.goodInfo.push(toolobj);
        itemXX.goodList.push(obj);
      });
      //   let li = encodeURIComponent(JSON.stringify(itemXX));
      // uni.navigateTo({
      // 	url: `/pages/SXT/faceImg?YYXQxx=` + li
      // })
      //绘制打印信息
      getAccessToken(itemXX, "健康自测");
    },
    queryList(val) {
      this.loading = true;
      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.list = [];
      }
      //获取保洁服务
      getToolList({
        siteId: this.siteData.id,
        pageNumber: val,
        pageSize: 10,
      })
        .then((res) => {
          if (res.resultMessage != "SUCCESS") {
            this.list = [];
            this.error = true; // 显示错误提示
          } else if (res.data.length == 0) {
            this.list = [];
            this.finished = true;
          } else {
            let dataList = res.data.map((item) => {
              return {
                id: item.id,
                goodId: item.id,
                goodName: item.toolName,
                goodImage: item.toolImage,
                goodSumQty: item.toolSum,
                goodRemainQty: item.toolRemain,
                goodSiteId: item.siteId,
                goodDescription: item.toolDescription,
                remark: item.toolExtend1,
                ZT: "1",
              };
            });
            this.list = [...this.list, ...dataList];
          }
          this.loading = false;
          // 判断是否已加载完所有数据
          if (this.list.length == res.pageNum) {
            this.finished = true;
          } else {
            this.pageData.pageNumber++;
          }
          this.refreshing = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closeCalendar(val) {
      this.dateshow = val;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../static/css/index.less";
@import "../../static/css/GYcSS.less";
.pull-refresh_Search {
  height: calc(
    var(--real-vh, 1vh) * 100 - 125px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
}
.li_left {
  width: 100px;
  height: 100%;
  padding: 5px;
  margin: 0;
  img {
    width: 100px;
    height: 100%;
    border-radius: 5px;
  }
}
.li_right {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.connect-mode {
  width: 70px;
  height: 70px;
  position: fixed;
  right: 0;
  bottom: 20%;
  z-index: 10;
  overflow: hidden;
}

.connect-mode image {
  width: 50%;
  height: 50%;
  border-radius: 50%;
}

.connect-mode-hidden {
  right: -25px;
  animation: hiddenRight 0.3s linear forwards;
}

.connect-mode-show {
  right: 0px;
  animation: showingRight 0.3s linear forwards;
}

.li {
  overflow: hidden;
}

.wupin_time_title {
  width: 90%;
  margin: 5px auto;
  color: #ffffff;
  @include fron-display(flex, "", center);

  @include respond-to("phone") {
    font-size: 15px;
    padding-top: 10px;
  }

  @include respond-to("android") {
    font-size: 15px;
    padding-top: 10px;
  }

  .tools_image {
    margin-right: 5px;
    height: 100%;
    @include fron-display(flex, "", center);

    @include respond-to("phone") {
      width: 21px;

      img {
        width: 100%;
        height: 18px;
      }
    }

    @include respond-to("android") {
      width: 21px;

      img {
        width: 100%;
        height: 18px;
      }
    }
  }

  .wupin_t {
    display: flex;
    align-items: center;
    width: 100%;
    color: #36c2a8;
  }

  .wupin_title_1 {
    font-weight: 700;
    color: black;
  }

  .time_title {
    @include respond-to("phone") {
      width: 49%;
    }

    @include respond-to("android") {
      width: 49%;
    }
  }
}

.minus_addkey_image {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 5px;
}

.cleaning_bottom_list {
  padding: 0 5px 15px;
  font-size: 16px;
  bottom: 0;

  .cleaning_bottom {
    background: #36c2a8;
    color: #ffffff;
    height: 45px;
    border-radius: 4px;
    text-align: center;
    line-height: 45px;
    width: 90%;
    margin: 0 auto;
    margin-top: 15px;
  }
}
</style>